<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理 - Express</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link rel="stylesheet" th:href="@{/public/assets/css/bootstrap.min.css}" href="../../public/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" th:href="@{/public/assets/css/bootstrap-table.css}" href="../../public/assets/css/bootstrap-table.css"/>
    <link rel="stylesheet" th:href="@{/public/assets/css/express.css}" href="../../public/assets/css/express.css"/>
</head>
<body>
    <div class="container-fluid">
        <!-- 头部 -->
        <nav th:replace="common/nav::html"></nav>
        <!-- 主体 -->
        <div class="row">
            <!-- 左侧菜单 -->
            <div th:replace="common/sidebar::html"></div>
            <div class="col-md-10">
                <!-- 筛选条件 -->
                <div class="panel-heading">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="inputEnableStatus">启用状态</label>
                            <select id="inputEnableStatus" class="form-control">
                                <option value="-1">不筛选</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputLock">账户冻结</label>
                            <select id="inputLock" class="form-control">
                                <option value="-1">不筛选</option>
                                <option value="1">冻结</option>
                                <option value="0">未冻结</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputRel">实名认证</label>
                            <select id="inputRel" class="form-control">
                                <option value="-1">不筛选</option>
                                <option value="1">已认证</option>
                                <option value="0">未认证</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputRole">用户权限</label>
                            <select id="inputRole" class="form-control">
                                <option value="-1">不筛选</option>
                                <!--<option value="-1">非正式用户</option>-->
                                <option value="1">系统管理员</option>
                                <option value="2">配送员</option>
                                <option value="3">普通用户</option>
                                <option value="4">vip用户</option>
                                <option value="5">svip用户</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputId">用户ID</label>
                            <input type="text" class="form-control" id="inputId">
                        </div>
                        <div class="form-group">
                            <label for="inputUsername">用户名</label>
                            <input type="text" class="form-control" id="inputUsername">
                        </div>
                        <div class="form-group">
                            <label for="inputTel">手机号码</label>
                            <input type="text" class="form-control" id="inputTel">
                        </div>
                        <button type="button" class="btn btn-info ml10" onclick="flushTable()">条件查询</button>
                    </form>
                </div>
                <div class="panel-body">
                    <table id="tb_user"></table>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户详情模态框 -->
    <div class="modal fade" id="infoModel" tabindex="-1" role="dialog" aria-labelledby="infoModelLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="infoModelLabel">用户详情</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="modUserId" class="col-sm-3 control-label">用户id</label>
                            <div class="col-sm-9">
                                <p class="form-control-static" id="modUserId"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modUserRole" class="col-sm-3 control-label">角色</label>
                            <div class="col-sm-9">
                                <p class="form-control-static" id="modUserRole"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modUserSex" class="col-sm-3 control-label">性别</label>
                            <div class="col-sm-9">
                                <p class="form-control-static" id="modUserSex"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modUserRealName" class="col-sm-3 control-label">真实姓名</label>
                            <div class="col-sm-9">
                                <p class="form-control-static" id="modUserRealName"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modUserIdCard" class="col-sm-3 control-label">身份证号</label>
                            <div class="col-sm-9">
                                <p class="form-control-static" id="modUserIdCard"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modUserWorkIdCard" class="col-sm-3 control-label">学/工号</label>
                            <div class="col-sm-9">
                                <p class="form-control-static" id="modUserWorkIdCard"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modUserSchool" class="col-sm-3 control-label">学校</label>
                            <div class="col-sm-9">
                                <p class="form-control-static" id="modUserSchool"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modUserIsLeave" class="col-sm-3 control-label">是否请假中</label>
                            <div class="col-sm-9">
                                <p class="form-control-static" id="modUserIsLeave"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputStartDate" class="col-sm-1 col-lg-offset-1">从</label>
                            <input type="date" id="inputStartDate" class="col-sm-4">
                            <label for="inputEndDate" class="col-sm-1">到</label>
                            <input type="date" id="inputEndDate" class="col-sm-4">
                        </div>
                        <div class="form-group">
                                <button type="button" role="button" class="col-sm-10 col-lg-offset-1 btn btn-info" onclick="showSignChart()">查询签到情况</button>
                        </div>
                        <div class="form-group">
                            <div id="signChart" class="col-sm-10 col-lg-offset-1" style="width: 500px;height:500px;display: none;"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/public/assets/js/http.js}" src="../../public/assets/js/http.js"></script>
    <script th:src="@{/public/assets/js/express.js}" src="../../public/assets/js/express.js"></script>
    <script th:src="@{/public/assets/js/jquery.min.js}" src="../../public/assets/js/jquery.min.js"></script>
    <script th:src="@{/public/assets/js/jquery.validate.min.js}" src="../../public/assets/js/jquery.validate.min.js"></script>
    <script th:src="@{/public/assets/layer/layer.js}" src="../../public/assets/layer/layer.js"></script>
    <script th:src="@{/public/assets/js/bootstrap.min.js}" src="../../public/assets/js/bootstrap.min.js"></script>
    <script th:src="@{/public/assets/js/bootstrap-table.min.js}" src="../../public/assets/js/bootstrap-table.min.js"></script>
    <script th:src="@{/public/assets/js/bootstrap-table-export.mhin.js}" src="../../public/assets/js/bootstrap-table-export.min.js"></script>
    <script th:src="@{/public/assets/js/bootstrap-table-zh-CN.min.js}" src="../../public/assets/js/bootstrap-table-zh-CN.min.js"></script>
    <script th:src="@{/public/assets/js/tableExport.min.js}" src="../../public/assets/js/tableExport.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script th:src="@{/public/assets/js/echart/macarons.js}" src="../../public/assets/js/echart/macarons.js"></script>
    <!-- 公用头部JS start -->
    <div th:replace="~{common/configJS :: configJS}">...</div>
    <!-- 公用头部JS end -->
    <script>
        let uid = getCookieValue('uid');
        let token = "Bearer " + uid;

        $(function () {
            $("#user-sidebar").addClass('active');

            //1、初始化Table
            var oTable = new TableInit();
            oTable.Init();
        });

        var TableInit = function () {
            let oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#tb_user').bootstrapTable({
                    ajaxOptions: {
                        headers: {
                            'Authorization':token
                        }
                    },
                    url: $('#userInfoListURL').val(),          //请求后台的URL（*）
                    method: HTTP.GET,                   //请求方式（*）
                    toolbar: '#toolbar',                //工具按钮组id
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: false,                    //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    queryParams: oTableInit.queryParams,//传递参数（*）
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber:1,                       //初始化加载第一页，默认第一页
                    pageSize: 10,                       //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端。后台分页时意义不大
                    showColumns: true,                  //是否显示所有的列
                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    clickToSelect: true,                //是否启用点击选中行
                    // height: 750,                     //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                    showToggle:false,                   //是否显示详细视图和列表视图的切换按钮
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                  //是否显示父子表
                    showExport: true,                   //是否显示导出
                    exportDataType: "basic",            //导出的模式是当前页basic、所有数据all、选中数据selected。
                    columns: [{
                        field: 'id',
                        title: '用户ID'
                    }, {
                        field: 'role',
                        title: '用户权限',
                        formatter: roleFormatter
                    }, {
                        field: 'username',
                        title: '用户名'
                    }, {
                        field: 'tel',
                        title: '手机号码'
                    },{
                        field: 'score',
                        title: '评分',
                        formatter: scoreFormatter
                    },  {
                        field: 'hasReal',
                        title: '实名状态',
                        formatter: realFormatter
                    }, {
                        field: 'hasEnable',
                        title: '启用状态',
                        formatter: enableFormatter
                    },
                    // , {
                    //     field: 'lockDate',
                    //     title: '冻结时间',
                    //     formatter: lockFormatter
                    // }
                    {
                        field: 'createDate',
                        title: '注册时间'
                    }, {
                        field: 'id',
                        title: '操作',
                        width: 150,
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter
                    }]
                });
            };

            // 传递给后台的参数
            oTableInit.queryParams = function (params) {
                return {   //这里的键的名字和后台参数必须一致
                    size: params.limit,                             //页面大小
                    current: (params.offset / params.limit) + 1,   //页码
                    // 筛选参数
                    id: $("#inputId").val(),
                    tel: $("#inputTel").val(),
                    username: $("#inputUsername").val(),
                    hasEnable: $("#inputEnableStatus").val(),
                    isLock: $("#inputLock").val(),
                    isReal: $("#inputRel").val(),
                    role: $("#inputRole").val()
                };
            };
            return oTableInit;
        };

        //操作栏的格式化
        function actionFormatter(value, row, index) {
            let id = "'" + value + "'", result = '';
            result = '<button class="btn btn-xs btn-info" onclick="showDetail('+id+')" title="查看"><span class="glyphicon glyphicon-search"></span></button>\n';
            // 不允许操作管理员
            if( row.role === 1) {
                return result;
            }
            // 启用/禁用
            if(row.hasEnable) {
                result += '<button class="btn btn-xs btn-danger" onclick="changeStatus(1,'+id+')" title="禁用">禁用</button>\n';
            } else {
                result += '<button class="btn btn-xs btn-success" onclick="changeStatus(2,'+id+')" title="启用">启用</button>\n';
            }

            // 冻结时间
            if(row.lockDate == '0001-01-01 00:00:00' ) {
                result += '<button class="btn btn-xs btn-danger" onclick="changeStatus(3,'+id+')" title="冻结">冻结</button>\n';
            } else {
                result += '<button class="btn btn-xs btn-success" onclick="changeStatus(4,'+id+')" title="解冻">解冻</button>\n';
            }

            return result;
        }
        function roleFormatter(value, row, index) {
            switch (value) {
                case -1:
                    return '<span style="color:gray">非正式用户</span>';
                case 1:
                    return '<span>系统管理员</span>';
                case 2:
                    return '<span>配送员</span>';
                case 3:
                    return '<span>普通用户</span>';
                case 4:
                    return '<span>vip用户</span>';
                case 5:
                    return '<span>svip用户</span>';
            }
        }
        function realFormatter(value, row, index) {
            if(value) {
                return '<span style="color:gray">已实名</span>';
            } else {
                return '<span style="color:red">未实名</span>';
            }
        }
        function enableFormatter(value, row, index) {
            if(value) {
                return '<span style="color:gray">启用</span>';
            } else {
                return '<span style="color:red">禁用</span>';
            }
        }
        function lockFormatter(value, row, index) {
            if(value === null || value === '') {
                return '<span style="color:gray">未冻结</span>';
            } else {
                return '<span style="color:red">'+value+'</span>';
            }
        }
        function scoreFormatter(value, row, index) {
            if(value != null) {
                if(value < 3) {
                    return '<span style="color:red">'+value+'</span>';
                } else if(value < 7) {
                    return '<span style="color:orange">'+value+'</span>';
                } else {
                    return '<span style="color:green">'+value+'</span>';
                }
            }
        }
        
        function showDetail(id) {
            $('#signChart').css('display','none');
            sendJson(HTTP.GET, $('#userInfoDetailURL').val() + id, {"Authorization": token}, null, false, function (res) {
                if (res.code !== 10000) {
                    layer.msg(res.data,{icon:5});
                } else {
                    // 初始化模态框信息
                    let data = res.data;
                    $("#modUserId").text(data.id);
                    $("#modUserSex").text(data.sex);
                    $("#modUserRealName").text(data.realName);
                    $("#modUserIdCard").text(data.idCard);
                    $("#modUserWorkIdCard").text(data.workerIdCard);
                    $("#modUserSchool").text(data.schoolName);
                    $("#modUserIsLeave").text(data.leaveStatusStr);
                    $('#modUserRole').text(data.roleName);
                    $("#infoModel").modal("show");
                }
            }, function () {
                layer.msg("未知错误",{icon:2});
            });
        }
        
        function showSignChart() {
            let role = $('#modUserRole').html();
            if (role != "配送员"){
                layer.msg('目前只有配送员有签到数据', {icon:5});
                return;
            }
            let courierId = $('#modUserId').html();
            let startDate = $('#inputStartDate').val();
            let endDate = $('#inputEndDate').val();
            let index = layer.load(1,{shade: [0.1,'#fff']});
            let signChart = echarts.init(document.getElementById('signChart'),'macarons');
            let data = '';

            sendJson(HTTP.GET, $('#courierSignDetailURL').val() + courierId, {"Authorization": token},
                {'startDateStr':startDate, 'endDateStr':endDate}, false,
                function (res) {
                    data = res.data;
                    done();
                    layer.close(index);
                    $('#signChart').css('display','block');
                },
                function () {
                    layer.close(index);
                    layer.msg('获取数据失败！未知错误',{icon:5});
                })
            
            
            function done() {
                let option = {
                    title : {
                        text: '配送员签到饼图',
                        subtext: $('#modUserRealName').html(),
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['签到日', '加班日', '无签日']
                    },
                    series : [
                        {
                            name: '',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:data.normalSignCount, name:'签到日'},
                                {value:data.workSignCount, name:'加班日'},
                                {value:data.notWorkCount, name:'无签日'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                signChart.setOption(option);
            }
        }

        function changeStatus(type, id) {
            // 1. 禁用；2：启用；3：冻结；4：解冻
            if(type === 3) {
                layer.prompt({title:"冻结小时", formType:0},function(val, index) {
                    sendJson(HTTP.POST, "/api/v1/user/"+id+"/status", {"type": type, "hour": val}, false, function (res) {
                        if(res.code === 0) {
                            layer.msg("操作成功",{icon:1});
                            layer.close(index);
                            flushTable();
                        } else {
                            layer.msg(res.msg,{icon:2});
                        }
                    }, function () {
                        layer.msg("未知错误",{icon:2});
                    });
                });
            } else {
                sendJson(HTTP.POST, "/api/v1/user/"+id+"/status", {"type": type}, false, function (res) {
                    if(res.code === 0) {
                        layer.msg("操作成功",{icon:1});
                        flushTable();
                    } else {
                        layer.msg(res.msg,{icon:2});
                    }
                }, function () {
                    layer.msg("未知错误",{icon:2});
                });
            }
        }

        function flushTable() {
            $("#tb_user").bootstrapTable('refresh',{url : $('#userInfoListURL').val()} );
        }
    </script>
</body>
</html>